<template>
	<view>
		<view class="flex flex-wrap align-center justify-between padding-lr-sm">
			<navigator class="list-item bg-white radius margin-top-sm" hover-class="none" :url="'/pages/goods/view?id=' + item.id" v-for="(item,index) in goodsList"
			 :key="index">
				<view class="item">
					<image :src="baseUrl + item.image" mode="aspectFill"></image>
				</view>
				<view class="flex flex-direction align-start padding-sm">
					<view class="title text-lg text-cut">{{item.goods_name}}</view>
					<text class="text-price text-red text-bold text-lg padding-tb-xs">{{item.spec[0].goods_price}}</text>
					<view class="flex justify-between response">
						<text class="text-price">{{item.spec[0].line_price}}</text>
						<text class="text-gray text-sm">已售{{item.goods_sales}}</text>
					</view>
				</view>
			</navigator>
		</view>
		<view class="text-center padding">已全部加载</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$api.baseUrl
			};
			
		},
		props: {
			goodsList : {
				type: Array,
				default: function(res) {
					return [];
				}
			}
		}
	}
</script>

<style lang="scss">
	.list-item {
		width: 350rpx;

		.item {
			width: 100%;
			height: 350rpx;

			image {
				height: 100%;
				width: 100%;
				border-radius: 6upx 6upx 0 0;
			}
		}
		.title {
			width: 320upx;
		}

	}

	.cart {
		border: 1rpx solid #e54d42;
		border-radius: 50%;
		padding: 3upx;
	}
</style>
